<template>
  <div>
    <h3>总金额</h3>
    <input type="text" v-model="cost" /><br />
    <span>今天吃饭用了{{ cost }}元</span>
    <h3>用餐人数</h3>
    <input type="text" v-model="name" @keyup.enter="add" />&nbsp;
    <input type="button" value="添加" @click="add" />
    <ul v-for="(value, index) in list" :key="index">
      <li>
        第{{ index + 1 }}位:{{ value.name }},需要支付{{
          (cost / list.length).toFixed(1)
        }}元
        <input type="button" value="X" @click="del(index)" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cost: 0,
      list: [
        {
          name: "jack",
        },
      ],
    };
  },
  methods: {
    add() {
      let newobj = { name: this.name };
      console.log(this.name);
      this.list.push(newobj);
    },
    del(index) {
      // splice(规定添加/删除项目的位置, 要删除的项目数量, 向数组添加的新项目。) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
      // arr.splice(2,0,"William")增加
      this.list.splice(index, 1);
    },
  },
};
</script>

<style>
</style>

